草庐IT

React 组件

全部标签

javascript - 人们更喜欢使用 React 组件的构造函数而不是 componentWillMount 有什么原因吗?

我发现使用生命周期方法componentWillMount来设置初始状态...componentWillMount(){this.state={comments:[]};}...比使用构造函数稍微简单一些。即因为当您使用构造函数时,您有调用super()。constructor(){super();this.state={comments:[]};}不仅如此,如果您的组件传递了props和/或state,那么您还必须手动传递它们。constructor(props,state){super(props,state);...}我在使用componentWillMount时没有遇到任何问题

javascript - 在 JSX 中使用 React.cloneElement()

我想知道如何在JSX中使用cloneElement语法。我阅读了文档并尝试了示例,但仍然没有任何线索。classABCextendsReact.Component{constructor(props){super(props)}render(){return({React.cloneElement()})}} 最佳答案 根据documentation:CloneandreturnanewReactelementusingelementasthestartingpoint.Theresultingelementwillhavetheo

javascript - React - 在添加新元素后刷新数据列表的最佳做法是什么?

我正在构建一个简单的待办事项列表。我有一个用于添加新的待办事项列表项的表单,在它下面列出了待办事项列表中的所有项目。当我通过表单添加新项目时,我想刷新现有待办事项列表。项目.jsx:classItemsextendsReact.Component{constructor(props){super(props);this.state={items:[],loading:true};}componentDidMount(){axios.get('/api/v1/items').then(response=>{this.setState({items:response.data,loadin

javascript - React 导入前的 '@' 是什么意思?

这个问题在这里已经有了答案:Whatisthemeaningofthe"at"(@)prefixonnpmpackages?(4个答案)关闭4年前。我将在React中看到如下所示的导入:import{object}from'@library/component'@指的是什么,这是什么类型的导入?谢谢!

javascript - Angular 4 : changing url, 但未呈现组件

我正在尝试使用routerLink="selected"从一个组件链接一个组件constroutes:Routes=[{path:'',children:[{path:'account',component:AccountComponent,children:[{path:'selected',component:SelectedComponent,},],},]}];@NgModule({imports:[RouterModule.forChild(routes)],exports:[RouterModule],})exportclassAccountSettingsRoutingM

javascript - 在 React setState 函数中使用 e.target.value 的问题

我在React中遇到了一个奇怪的问题。我想我可能还没有完全掌握React的工作原理,非常感谢您的帮助。请在下面找到我的React组件:classmyComponentextendsComponent{state={value:''}updateValue=e=>{this.setState({value:e.target.value})}render(){return()}}然后,现在如果我在文本字段中键入内容,我将收到以下警告和错误:警告:出于性能原因重用此合成事件。如果您看到这一点,则表示您正在访问已发布/已取消的合成事件的属性target。这被设置为空。如果您必须保留原始合成事件

javascript - 在ajax调用后 react 组件状态变化但不重新渲染组件

在这一部分,用户可以对帖子发表评论。在服务器端检查并收到数据后,我尝试更改this.state.comments值。这样就完成了。但问题是,它并没有改变组件的评论部分。我已经阅读了之前关于重新渲染的问题,所以请不要标记为重复。下面是代码:$.post("requests.php",{requestKey:'newComment',commenterUser:commenterUser,commenterEmail:commenterEmail,theComment:theComment,pnum:pnum},function(data,status,xhr){if(status=='s

javascript - React/Redux 中的通用 reducer / Action

我正在尝试确定如何提取多条数据以在同一组件中使用。我看到的每个React/Redux示例都请求非常具体的数据,并且有reducer和操作来处理该确切类型的数据。但是,我无法找到有关处理更多通用数据的信息。例如,我的网站上有几个不同的组件(或类别)。其中一个组件是Cards。因此,如果用户单击/cards/hockey的链接,它应该从API请求曲棍球数据(如果它不在商店中),并将其显示在Cards页面中。如果用户单击/cards/football的链接,它应该遵循相同的过程,检查它是否有存储的数据,如果没有从API中提取它,并显​​示卡片包含该数据的页面。另一种组件类型可能是stats,

javascript - 与 React 的默认导入混淆

要导入React,我们编写importReactfrom'react'。但这是默认导出权吗?因此,如果我将其名称更改为React以外的名称,它也应该可以工作。但它不起作用。谁能解释一下为什么? 最佳答案 本质上,JSX编译器(如Babel/TypeScript)将JSX代码转换为纯JavaScript。例如,下面的JSX代码:constElement=()=>(Heythere);编译成:constElement=()=>(React.createElement("div",null,"Heythere"));现在是可以被浏览器解析

javascript - 更改状态时延迟加载 Angular 组件脚本

这个问题在过去一天左右一直存在。我一直在尝试让我的AngularJS应用程序延迟加载每个状态组件的脚本文件。我正在使用Angular进行一个大型项目,并且index.html文件已变成超过100个标签包括各种Controller、服务和库的JS。它们中的大多数都很小,所以加载时间并不是一个大问题(尽管它可能是),但它对我来说从来都不是干净的。也许是因为我已经习惯了PHP的自动加载器,或者刚刚被所有可以在编译时加载自己的依赖项的语言宠坏了。必须在应用程序的根文档中为一些次要的、边缘状态的指令加载脚本,或者如果指令实际属于的模块在没有的情况下移动到另一个应用程序中时不加载脚本本身,这不是模